<template>
  <div class="contacts-page">
    <div class="page-header">
      <h1>联系人管理</h1>
      <p>管理您的客户联系人信息</p>
    </div>

    <div class="contacts-content">
      <div class="contacts-toolbar">
        <div class="search-box">
          <input 
            v-model="searchQuery" 
            type="text" 
            placeholder="搜索联系人..." 
            class="search-input"
          />
          <i class="search-icon">🔍</i>
        </div>
        
        <button class="btn btn-primary">
          <i class="icon-add"></i>
          <span>添加联系人</span>
        </button>
      </div>

      <div class="contacts-grid">
        <div 
          v-for="contact in filteredContacts" 
          :key="contact.id"
          class="contact-card"
        >
          <div class="contact-avatar">
            <img :src="contact.avatar" :alt="contact.name" />
            <div class="status-indicator" :class="contact.status"></div>
          </div>
          
          <div class="contact-info">
            <h3 class="contact-name">{{ contact.name }}</h3>
            <p class="contact-company">{{ contact.company }}</p>
            <p class="contact-email">{{ contact.email }}</p>
          </div>
          
          <div class="contact-actions">
            <button class="action-btn" title="发送消息">
              <i class="icon-message"></i>
            </button>
            <button class="action-btn" title="编辑">
              <i class="icon-edit"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const searchQuery = ref('')

// 模拟联系人数据
const contacts = ref([
  {
    id: '1',
    name: '张三',
    company: '科技公司',
    email: 'zhangsan@example.com',
    avatar: '/default-avatar.png',
    status: 'online'
  },
  {
    id: '2',
    name: '李四',
    company: '设计工作室',
    email: 'lisi@example.com',
    avatar: '/default-avatar.png',
    status: 'offline'
  },
  {
    id: '3',
    name: '王五',
    company: '咨询公司',
    email: 'wangwu@example.com',
    avatar: '/default-avatar.png',
    status: 'away'
  }
])

const filteredContacts = computed(() => {
  if (!searchQuery.value) return contacts.value
  
  return contacts.value.filter(contact =>
    contact.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
    contact.company.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
    contact.email.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})
</script>

<style scoped>
.contacts-page {
  padding: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.page-header h1 {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-2xl);
  color: var(--color-text);
}

.page-header p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
}

.contacts-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  gap: var(--spacing-lg);
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.search-input {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md) 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-background);
  color: var(--color-text);
  font-size: var(--font-size-base);
}

.search-icon {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid transparent;
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.contact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  transition: all var(--transition-fast);
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.contact-avatar {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto var(--spacing-md);
}

.contact-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.status-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--color-surface);
}

.status-indicator.online {
  background: var(--color-success);
}

.status-indicator.away {
  background: var(--color-warning);
}

.status-indicator.offline {
  background: var(--color-text-secondary);
}

.contact-info {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.contact-name {
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.contact-company,
.contact-email {
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.contact-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
}

.action-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.action-btn:hover {
  background: var(--color-hover);
  color: var(--color-primary);
}

/* 图标样式 */
.icon-add::before { content: '➕'; }
.icon-message::before { content: '💬'; }
.icon-edit::before { content: '✏️'; }

/* 响应式设计 */
@media (max-width: 768px) {
  .contacts-page {
    padding: var(--spacing-lg);
  }
  
  .contacts-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-box {
    max-width: none;
  }
  
  .contacts-grid {
    grid-template-columns: 1fr;
  }
}
</style>